<template>
	<div class="com-header">
		<div class="top">
      <img class="logo" :src="logo" alt="">
      <div class="mid-search">
        <label for="search"><i class="el-icon-search isearch"></i></label>
        <input id="search" type="" name="search" v-model="search">
        <div class="btn" v-on:click="ss()">搜索</div>
      </div>
      <div class="loginbtn">
        <i class="icon iconfont icon-gerenzhongxin" v-if="!this.$store.state.userid" @click="gologin()"></i>
        
        <div v-else style="width: 100%;height: 100%;">
          
          <img :src="cp1" alt="" @click="goperson()" v-if="this.$store.state.headimg == 'null' || this.$store.state.headimg == null">
          <img :src="comimgsrc+this.$store.state.headimg" v-else @click="goperson()" alt="">
          
        </div>
        
      </div>
    </div>
    <div class="down">
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <router-link to="/" exact class="swiper-slide">
              <div class="mid"><p>首页</p></div>
              <div class="backgroundbox">
                <img :src="tbg">
              </div>
            </router-link>
            <router-link to="/limit" class="swiper-slide">
              <div class="mid"><p>当季鲜果</p></div>
              <div class="backgroundbox">
                <img :src="tbg">
              </div>
            </router-link>
            <router-link to="/fresh" class="swiper-slide">
              <div class="mid"><p>鲜果汇</p></div>
              <div class="backgroundbox">
                <img :src="tbg">
              </div>
            </router-link>
            <router-link to="/specialty" class="swiper-slide">
              <div class="mid"><p>凉山特产</p></div>
              <div class="backgroundbox">
                <img :src="tbg">
              </div>
            </router-link>
            <router-link to="/distribution" class="swiper-slide">
              <div class="mid"><p>分销购</p></div>
              <div class="backgroundbox">
                <img :src="tbg">
              </div>
            </router-link>
            <router-link to="/news" class="swiper-slide">
              <div class="mid"><p>鲜果资讯</p></div>
              <div class="backgroundbox">
                <img :src="tbg">
              </div>
            </router-link>
            <router-link to="/about" class="swiper-slide">
              <div class="mid"><p>关于我们</p></div>
              <div class="backgroundbox">
                <img :src="tbg">
              </div>
            </router-link>
        </div>
      </div>
    </div>
    <div v-show="isActive" class="gotop" v-on:click="gotop(50)">
      <i class="icon iconfont icon-msnui-top"></i>
    </div>
	</div>
</template>
<script>

import logo_img from '@/assets/image/logo.png'
import tbg from '@/assets/image/tbg.png'
import cp1 from '@/assets/image/cp1.jpg'
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import store from '@/vuex/store';
import qs from "qs"
export default {
	name: 'index',
  	data () {
  		return{
        logo:logo_img,
        tbg,cp1,
        isActive:false,
        comimgsrc:'http://api.mountainfreshes.com',
        search:'',
        openid:''
  		}
  	},
  	methods:{
      
      ss:function(){
        this.$router.push({ name: 'searchpage', query:{cpid: this.search} })
        
      },
      gotop:function(i){
        document.documentElement.scrollTop-=i;
                if (document.documentElement.scrollTop>0) {
                    var c=setTimeout(()=>this.gotop(i),16);
                }else {
                    clearTimeout(c);
                }
      },
      gologin:function(){
        this.$router.push({ name: 'login' })
      },
      goperson:function(){
        this.$router.push({ name: 'person' })
      },
      getinfo:function(){
        this.$http.post("/index.php/user/user/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: localStorage.userid
              }))
              .then(res => {
                console.log(res)
                localStorage.headimg = res.data.row.headimg
                this.$store.state.headimg = res.data.row.headimg
              })
              .catch(error => {
                alert("网络错误")
              });
      }


  	},
  	components:{
      
  	},
  	mounted(){
      var swiper = new Swiper('.swiper-container', {
          slidesPerView: 'auto',
          paginationClickable: true,
          spaceBetween: 0
      });
    },
    created(){
      this.getinfo();
      var vm=this;
            window.onscroll=function(){
                if (document.documentElement.scrollTop>60) {
                    vm.isActive=true;
                }else {
                    vm.isActive=false;
                }
            }
      
      
      this.$store.state.dlzt = localStorage.dlzt;
      this.$store.state.username = localStorage.name;
      this.$store.state.userid = localStorage.userid;
      this.$store.state.headimg = localStorage.headimg;
      console.log(this.$store.state.headimg)
      
    },
}
</script>
<style scoped lang="less">
.gotop{
  width: .52rem;
  height: .52rem;
  border-radius: 100%;
  background: #52b14d;
  line-height: .52rem;
  position: fixed;
  z-index: 11111;
  bottom: 2rem;
  right: .2rem; 
  i{
    text-align: center;
    color: #fff;
    font-size: .32rem;
  }
}
.com-header{
  width: 100%;
  height: 1.86rem;
  .top{
    padding: .08rem .2rem;
    overflow: hidden;
    zoom: 1;
    height: auto;
    .logo{
      display: block;
      width: .88rem;
      float: left;
    }
    .mid-search{
      width: 3.68rem;
      height: .54rem;
      float: left;
      box-sizing: border-box;
      border: .02rem solid #54b84c;
      border-radius: .06rem;
      margin: .23rem 0 0 .28rem;
      .isearch{
        display: block;
        font-size: .3rem;
        color: #2c3e50;
        float: left;
        line-height: .54rem;
        margin-left: .1rem;
      }
      input{
        display: block;
        float: left;
        height: .5rem;
        width: 2.2rem;
        border: none;
        outline: none;
        margin: 0;
        padding: 0;
        margin-left: .1rem;
      }
      .btn{
        width: .7rem;
        height: 100%;
        float: right;
        background: #54b84c;
        text-align: center;
        line-height: .5rem;
        font-size: .16rem;
        color: #fff;
      }
    }
    .loginbtn{
      width: 0.56rem;
      height: 0.56rem;
      float: right;
      margin: 0.21rem 0.1rem 0 0;
      border-radius: 100%;
      overflow: hidden;
      img{
        display: block;
        width: 100%;
        height: 100%;
      }
      i{
        display: block;
        font-size: .56rem;
      }
    }
  }
  .down{
    width: 100%;
    height: .64rem;
    background: #54b84c;
    margin-top: .04rem;
    overflow: hidden;
    .swiper-container{
      width: 100%;
      height: 100%;
      .swiper-slide{
        display: block;
        width: auto;
        height: 100%;
        position: relative;
        .backgroundbox{
          display: none;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: -1; 
          line-height: .64rem;
          img{
            text-align: center;
            height: 100%;
          }
        }
        &:last-child{
          .mid{
            border-right: none;
          }
        }
        .mid{
          height: .28rem;
          margin-top: .18rem;
          box-sizing: border-box;
          border-right: .02rem solid #fff;
          p{
            font-size: .24rem;
            color: #fff;
            line-height: .28rem;
            margin: 0 .22rem;
          }
        }
      }
      .router-link-active{
        .backgroundbox{
          display: block;
        }
      }
    }
  }
}
</style>